<template>
    <div id="data-box">
        <div>
            <h1>成员数据</h1>
            <div
                id="echarts"
                :style="{ width: '400px', height: '400px' }"
            ></div>
        </div>
        <div>
            <div
                id="echarts2"
                :style="{ width: '400px', height: '400px' }"
            ></div>
        </div>
        <div>
            <div
                id="echarts3"
                :style="{ width: '400px', height: '400px' }"
            ></div>
        </div>
    </div>
</template>

<script>
import apis from "../../http/apis/apis";
export default {
    async mounted() {
        const { data: msg } = await apis.adminsApi.getData();
        this.data1.lessorsNum = msg.lessorsNum;
        this.data1.ordersNum = msg.ordersNum;
        this.data1.complaintsNum = msg.complaintsNum;
        this.data1.tenantsNum = msg.tenantsNum;

        const {data: msg2} = await apis.adminsApi.getData2();
        this.data2.notLeased=msg2.notLeased; 
        this.data2.leased=msg2.leased; 
        this.data2.notReviewed=msg2.notReviewed
        
        const{data:msg3} = await apis.adminsApi.getData3();
        this.data3.notPay = msg3.notPay;
        this.data3.isPay=msg3.isPay;
        this.data3.cancel = msg3.cancel;
        this.data3.complete = msg3.complete;

        var dom = document.getElementById("echarts");
        var myChart = this.echarts.init(dom);
        var dom2 = document.getElementById("echarts2");
        var myChart2 = this.echarts.init(dom2);
        var dom3 = document.getElementById("echarts3");
        var myChart3 = this.echarts.init(dom3);
        // 绘制图表
        myChart.setOption({
            series: [
                {
                    name: "用户数据",
                    type: "pie", //line bar
                    radius: "50%",
                    data: [
                        {
                            value: this.data1.lessorsNum,
                            name: "出租方用户数量",
                        },
                        {
                            value: this.data1.tenantsNum,
                            name: "组户数量",
                        },
                        {
                            value: this.data1.ordersNum,
                            name: "订单数",
                        },
                        {
                            value: this.data1.complaintsNum,
                            name: "投诉数",
                        },
                    ],
                },
            ],
        });
        myChart2.setOption({
            title: {
                text: "车位数据",
            },
            tooltip: {
            },
            legend: {
                data: ["数量"],
            },
            xAxis: {
                data: ["未审核", "租出", "未租出"],
            },
            yAxis: {},
            series: [
                {
                    name: "数量",
                    type: "bar",
                    data: [this.data2.notLeased, this.data2.leased, this.data2.notReviewed],
                },
            ],
        });
        myChart3.setOption({
            title: {
                text: "订单数据",
            },
            tooltip: {
            },
            legend: {
                data: ["数量"],
            },
            xAxis: {
                data: ["未支付", "已支付", "取消","完成"],
            },
            yAxis: {},
            series: [
                {
                    name: "数量",
                    type: "line",
                    data: [this.data3.notPay, this.data3.isPay, this.data3.cancel,this.data3.complete],
                },
            ],
        });
    },
    data() {
        return {
            data1: {
                lessorsNum: 0,
                tenantsNum: 0,
                ordersNum: 0,
                complaintsNum: 0,
            },
            data2:{
                notLeased:0,
                leased:0,
                notReviewed:0,
            },
            data3:{
                notPay:0,
                isPay:0,
                cancel:0,
                complete:0,
            }
        };
    },
};
</script>

<style lang="scss">
#data-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
</style>